<template>
  <div>
    <bcd-top title="详情" englishtitle="ARTICLE CENTER" />
    <div style="padding: 30px 10px">
      <div class="peo_detail">
        <div style="font-size: 24px; color: #2a333c; text-align: center">
          {{ obj.title }}
        </div>
        <div>
          <div
            style="
              color: #a3afb7;
              font-size: 16px;
              text-align: center;
              font-weight: 400;
            "
          >
            {{ obj.addTime.slice(0, 10) }}
          </div>
        </div>
      </div>
      <span v-html="obj.content"></span>
    </div>
    <footer-part></footer-part>
  </div>
</template>
<script>
import { articlDetail } from "../api/api";
import bcdTop from "../components/bcdTop";
import footerPart from "../views/footer";

export default {
  data() {
    return {
      obj: {},
    };
  },
  components: {
    bcdTop,
    footerPart
  },
  mounted() {
    console.log("1111", this.$route.query.id);
    this.getarticlDetail(this.$route.query.id);
  },
  methods: {
    async getarticlDetail(id) {
      let data = await articlDetail({ id: id });
      this.obj = data.data;
      this.obj.content =  (this.obj.content).replace(/<img/g,'<img style="max-width:100%;height:auto"');
    },
  },
};
</script>
<style scoped>
::v-deep .el-tabs__active-bar{
  background-color: transparent;
}
.peo_detail {
  width: 100%;
  padding: 20px 15px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px auto;
}
</style>